<template>
  <div id="">
    <label style="margin-left: 10px">统计时间：</label>
    <el-date-picker v-model="value4" type="daterange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
      format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" class="pickerchange" @change="tableChange">
    </el-date-picker>

    <label style="margin-left: 20px">选择库：</label>
    <el-select v-model="value5" style="width: 400px" multiple placeholder="请选择">
      <el-option v-for="item in options" :key="item.unittypeId" :label="item.unittypeName" :value="item.unittypeId">
      </el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 20px" @click="tablemake">
      导出Excel
    </el-button>
    <el-button type="primary" @click="test">查询</el-button>
    <el-tabs style="margin-left: 10px" v-model="activeName" @tab-click="handletabClick">
      <el-tab-pane v-for="val in options" :key="val.value" :label="val.unittypeName"
        :name="val.unittypeId.toString()"></el-tab-pane>
    </el-tabs>
    <el-table border :data="tableData" :stripe="true" @cell-click="openTable" style="width: 100%; margin-left: 20px">
      <el-table-column prop="unitSort" label="序号" width="60">
      </el-table-column>
      <el-table-column prop="unitName" label="单位名称" width="350">
      </el-table-column>
      <el-table-column v-for="(item, index) in tableColumn" :key="index" prop="month1" :label="item" width="90"
        align="right" v-show="Month1">

        <template slot-scope="scope">
          {{ scope.row.countLists[index] ? scope.row.countLists[index] : "-" }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="month1"
        label="统计月份1"
        width="90"
        align="right"
        v-show="Month1"
      >
        <template slot-scope="scope">
          {{ scope.row.month1 ? scope.row.month1 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month2"
        label="统计月份2"
        width="90"
        align="right"
        v-show="Month2"
      >
        <template slot-scope="scope">
          {{ scope.row.month2 ? scope.row.month2 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month3"
        label="统计月份3"
        width="90"
        align="right"
        v-show="Month3"
      >
        <template slot-scope="scope">
          {{ scope.row.month3 ? scope.row.month3 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month4"
        label="统计月份4"
        width="90"
        align="right"
        v-show="Month4"
      >
        <template slot-scope="scope">
          {{ scope.row.month4 ? scope.row.month4 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month5"
        label="统计月份5"
        width="90"
        align="right"
        v-show="Month5"
      >
        <template slot-scope="scope">
          {{ scope.row.month5 ? scope.row.month5 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month6"
        label="统计月份6"
        width="90"
        align="right"
        v-show="Month6"
      >
        <template slot-scope="scope">
          {{ scope.row.month6 ? scope.row.month6 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month7"
        label="统计月份7"
        width="90"
        align="right"
        v-show="Month7"
      >
        <template slot-scope="scope">
          {{ scope.row.month7 ? scope.row.month7 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month8"
        label="统计月份8"
        width="90"
        align="right"
        v-show="Month8"
      >
        <template slot-scope="scope">
          {{ scope.row.month8 ? scope.row.month8 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month9"
        label="统计月份9"
        width="90"
        align="right"
        v-show="Month9"
      >
        <template slot-scope="scope">
          {{ scope.row.month9 ? scope.row.month9 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month10"
        label="统计月份10"
        width="90"
        align="right"
        v-show="Month10"
      >
        <template slot-scope="scope">
          {{ scope.row.month10 ? scope.row.month10 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month11"
        label="统计月份11"
        width="90"
        align="right"
        v-show="Month11"
      >
        <template slot-scope="scope">
          {{ scope.row.month11 ? scope.row.month11 : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month12"
        label="统计月份12"
        width="90"
        align="right"
        v-show="Month12"
      >
        <template slot-scope="scope">
          {{ scope.row.month12 ? scope.row.month12 : "-" }}
        </template>
      </el-table-column> -->
      <el-table-column prop="count" label="总计" width="80" align="right">
      </el-table-column>
    </el-table>
    <!-- 查看当前单位中标列表 -->
    <el-dialog title="当前单位中标列表" :visible.sync="UnitthisOpen" append-to-body @close="closeUnitthis" width="1000px"
      :close-on-click-modal="false">
      <template>
        <el-table :data="winningList" style="width: 100%">
          <el-table-column prop="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column prop="extractItem" label="项目名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="120">
          </el-table-column>
          <el-table-column prop="extractApproveStatus" label="完成情况" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="opentablelist(scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
    <!-- 查看项目抽签结果对话框 -->
    <el-dialog :visible.sync="resultOpen" width="800px" append-to-body @close="closeUnittable"
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="120px" style="width: 700px; padding-left: 50px">
        <table class="printTable" border="1" id="printMe" cellspacing="0" width="100%" height="800px">
          <caption align="top" style="margin-bottom: 30px; font-size: 24px">
            重庆高新开发建设投资集团有限公司中介机构抽取结果表
          </caption>
          <tr>
            <td colspan="3" style="text-align: left" height="40px" class="font-FangSong topfont noBorder title-font">
              申请单位：{{ form && form.createBy }}
            </td>
            <td colspan="2" style="text-align: right" class="topfont noBorder font-FangSong">
              日期：{{ form && form.createTime | dateTime }}
            </td>
          </tr>
          <tr>
            <th rowspan="3" width="80px" class="bigfont">
              项 目 基
              <br />
              本 情 况
            </th>
            <td width="120px" height="60px" class="small font-SimHei">
              项 目 名 称
            </td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form && form.extractItem }}
            </th>
          </tr>
          <tr>
            <td class="small font-SimHei">建 设 地 址</td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form && form.extractAddress }}
            </th>
          </tr>
          <tr>
            <td class="small font-SimHei">
              工 程 费 用
              <br />
              (万 元)
            </td>
            <th width="150px" class="input font-FangSong">
              {{ form && form.extractPrice }}
            </th>
            <td width="80px" class="small font-SimHei">建 设 周 期</td>
            <th class="input commonBorder font-FangSong">
              {{ form && form.extractPeriod }}
            </th>
          </tr>
          <tr>
            <th :rowspan="rowspanList" class="bigfont">中 标<br />信 息</th>
            <td class="small font-SimHei">抽 取 库</td>
            <th class="input font-FangSong">{{ form && form.unitTypeName }}</th>
            <td class="small font-SimHei">暂定中介服务费（万元）</td>
            <th class="input commonBorder font-FangSong">
              {{ form && form.maxPrice }}
            </th>
          </tr>
          <tr>
            <td class="small font-SimHei">业 务 类 型</td>
            <th class="input font-FangSong">{{ form && form.extractBusinessType }}</th>
            <td class="small font-SimHei">抽 取 时 间</td>
            <th class="input commonBorder font-FangSong">
              {{ form && form.updateTime | dateTime }}
            </th>
          </tr>
          <tr>
            <td colspan="4" height="60px" class="small commonBorder font-SimHei">
              中 标 单 位 列 表
            </td>
          </tr>
          <tr>
            <td height="60px" class="small font-SimHei">序 号</td>
            <td class="small font-SimHei">单 位 名 称</td>
            <td width="120px" class="small font-SimHei">联 系 人</td>
            <td width="120px" class="small commonBorder font-SimHei">
              联 系 电 话
            </td>
          </tr>
          <tr v-if="items == ''">
            <th height="60px"></th>
            <th></th>
            <th></th>
            <th class="commonBorder"></th>
          </tr>
          <tr v-for="(item, index) in items" :key="item.id">
            <th height="60px" class="input font-FangSong">{{ index + 1 }}</th>
            <th class="input font-FangSong">{{ item.randomUnitName }}</th>
            <th class="input font-FangSong">{{ item.randomLinkman }}</th>
            <th class="input commonBorder font-FangSong">
              {{ item.randomPhone }}
            </th>
          </tr>
          <tr>
            <th rowspan="4" class="bigfont a1">
              参 与 抽
              <br />
              取 人 员
            </th>
            <td class="small font-SimHei">抽 取 地 点</td>
            <th class="input commonBorder font-FangSong" colspan="3">
              {{ form && form.extractPlace }}
            </th>
          </tr>
          <tr class="a1">
            <td class="small font-SimHei">现 场 抽 取 人</td>
            <th colspan="3" class="input commonBorder font-FangSong">
              {{ form && form.extractUser }}
            </th>
          </tr>
          <!-- <tr>
            <td rowspan="2" class="small a1 font-SimHei">
              纪 检 监 察
              <br />
              人 员
            </td>
            <th
              colspan="3"
              rowspan="2"
              class="input commonBorder a1 font-FangSong"
            ></th>
          </tr> -->
        </table>

        <!-- <el-button v-print="'#printMe'" type="primary" style="margin-top:10px;margin-left:90%">打 印</el-button> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getExtract } from "@/api/unit/extract";
import {
  getExcelTable,
  getExcelList,
  getRandomresult,
  getMonthrandom,
  listRandom,
} from "@/api/unit/random";
import { listUnittype } from "@/api/unit/unittype.js";
import { getUnit } from "@/api/unit/unit";
export default {
  data() {
    return {
      //中标项目列表数据
      winningList: [],
      //表格参数
      form: {},
      //循环表格数组
      items: [],
      // 查询抽签结果参数
      resultqueryParams: {
        extractId: null,
      },
      // 查询参数
      RandomqueryParams: {
        extractId: null,
        randomUnitId: null,
        randomBan: "0",
      },
      //动态控制rowspan
      rowspanList: 5,
      //默认显示
      Month1: true,
      Month2: true,
      Month3: true,
      Month4: true,
      Month5: true,
      Month6: true,
      Month7: true,
      Month8: true,
      Month9: true,
      Month10: true,
      Month11: true,
      Month12: true,
      //默认选中
      activeName: "1",
      tableData: [],
      tableColumn: [],
      options: [],
      //时间实体类
      timeform: {
        createTime: "",
        updateTime: "",
        unitTypeId: null,
      },
      //详情实体
      monthrandomform: {
        month: null,
        randomUnitId: null,
      },
      //中标列表实体
      formunit: {
        unitId: null,
      },
      //统计库选择器
      value5: "",
      //统计时间选择器
      value4: "",
      //项目抽签结果层
      resultOpen: false,
      //当前单位中标结果层
      UnitthisOpen: false,
    };
  },
  created() {
    this.getunitTypeId();
    this.Refresh();
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        extractId: null,
        extractItem: null,
        extractUser: null,
        createBy: null,
        extractRemarks: null,
        extractBanReason: null,
        extractScore: null,
        extractApproveStatus: "1",
        randomUnittypeId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        RandomList: [],
        extractPlace: null,
        quoteLimitTime: null,
        unitTypeName: null,
      };
      this.resetForm("form");
    },
    //打开打印表格
    async openTable(row, column, cell, event) {
      console.log(this.value4);
      let value6 = this.value4
      if (cell.innerText != "-") { //&& column.label != "总计"
        this.UnitthisOpen = true;
        var that = this;
        this.monthrandomform.month = column.label;
        if (value6?.length) {
          this.monthrandomform.createTime = value6[0];
          this.monthrandomform.updateTime = value6[1];
        }
        this.monthrandomform.randomUnitId = row.unitId;
        await getMonthrandom(this.monthrandomform).then((response) => {
          this.form = response.data[0];
          for (var c = 0; c < response.data.length; c++) {
            var unitlistArr = {
              index: "",
              unitName: "",
              randomName: "",
              state: "中标",
              extractApproveStatus: response.data[c].extractApproveStatus == 7 ? "进行中" : "已完成",
              extractItem: response.data[c].extractItem
            };
            unitlistArr.index = c + 1;
            unitlistArr.unitName = row.unitName;
            unitlistArr.randomName = response.data[c].extractAddress;
            this.winningList.push(unitlistArr);
          }
          this.RandomqueryParams.extractId = response.data[0]?.extractId;
        });
        this.RandomqueryParams.randomBan = 3;
        await listRandom(this.RandomqueryParams).then((response) => {
          this.items = response.rows;
        });
      }
    },
    opentablelist(row) {
      getMonthrandom(this.monthrandomform).then((response) => {
        for (var s = 0; s < response.data.length; s++) {
          if (this.winningList[s].index == row.index) {
            this.form = response.data[s];
          }
        }
        this.resultOpen = true;
      });
    },
    //关闭列表触发
    closeUnitthis() {
      this.winningList = [];
    },
    //关闭打印表触发
    closeUnittable() {
      this.form = {};
    },
    //刷新页面
    Refresh() {
      this.timeform.unitTypeId = 1;
      getExcelList(this.timeform).then((response) => {
        for (var i = 0; i < response.data.length; i++) {
          this.options[i].value = response.data[i].unittypeId.toString();
          this.options[i].label = response.data[i].unittypeName;

          for (var p = 0; p < response.data[i].unitList.length; p++) {
            //创建实体
            var listArr = {
              unitId: "",
              unitSort: "",
              unitName: "",
              countLists: "",
              count: "",
            };
            listArr.unitId = response.data[i].unitList[p].unitId;
            listArr.unitSort = response.data[i].unitList[p].unitSort;
            listArr.unitName = response.data[i].unitList[p].unitName;
            listArr.count = response.data[i].unitList[p].count;
            listArr.countLists = response.data[i].unitList[p].countLists;
            this.tableColumn = response.data[0].mouths;
            this.tableData.push(listArr);
          }
        }
      });
    },
    //切换tab
    handletabClick(e) {
      this.tableData = [];
      this.timeform.unitTypeId = e._props.name;
      getExcelList(this.timeform).then((response) => {
        for (var i = 0; i < response.data.length; i++) {
          for (var p = 0; p < response.data[i].unitList.length; p++) {
            //创建实体
            var listArr = {
              unitId: "",
              unitSort: "",
              unitName: "",
              countLists: "",
              count: "",
            };
            listArr.unitId = response.data[i].unitList[p].unitId;
            listArr.unitSort = response.data[i].unitList[p].unitSort;
            listArr.unitName = response.data[i].unitList[p].unitName;
            listArr.count = response.data[i].unitList[p].count;
            listArr.countLists = response.data[i].unitList[p].countLists;
            this.tableColumn = response.data[0].mouths;
            this.tableData.push(listArr);
          }
        }
      });
    },
    //查询按钮操作
    test() {
      this.value5.sort(function (a, b) {
        return a - b;
      });
      var min = this.value5[0];
      this.activeName = min;
      if (this.value5 != "") {
        this.optionsRest();
      } else {
        listUnittype().then((response) => {
          for (var m = 0; m < response.rows.length; m++) {
            this.options[m].value = response.rows[m].unittypeId.toString();
            this.options[m].label = response.rows[m].unittypeName;
          }
        });
        this.tableData = [];
      }
      this.timeform.unitTypeId = this.value5.join(",");
      // this.timeform.unitTypeId = this.value5[0];
      getExcelList(this.timeform).then((response) => {
        for (var i = 0; i < response.data.length; i++) {
          this.options[i].value = response.data[i].unittypeId.toString();
          this.options[i].label = response.data[i].unittypeName;
        }
        for (var p = 0; p < response.data[0].unitList.length; p++) {
          //创建实体
          var listArr = {
            unitId: "",
            unitSort: "",
            unitName: "",
            countLists: "",
            count: "",
          };
          listArr.unitId = response.data[0].unitList[p].unitId;
          listArr.unitSort = response.data[0].unitList[p].unitSort;
          listArr.unitName = response.data[0].unitList[p].unitName;
          listArr.count = response.data[0].unitList[p].count;
          listArr.countLists = response.data[0].unitList[p].countLists;
          this.tableColumn = response.data[0].mouths;
          this.tableData.push(listArr);
        }
      });
    },
    optionsRest() {
      (this.options = [
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
        {
          value: null,
          label: null,
        },
      ]),
        (this.tableData = []);
    },
    //获取库名称与id
    getunitTypeId() {
      listUnittype().then((response) => {
        this.options = response.rows;
      });
    },
    //获取时间
    tableChange(val) {
      this.timeform.createTime = val[0];
      this.timeform.updateTime = val[1];
    },
    /** 导出按钮操作 */
    tablemake() {
      var that = this;
      this.timeform.unitTypeId = this.value5.join(",");
      //const filName = "抽签统计表"
      this.$confirm("是否确认导出抽签统计表?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async function () {
        const res = await getExcelTable(that.timeform);
        const blob = new Blob([res], { type: "application/vnd.ms-excel" });
        const url = window.URL.createObjectURL(blob);
        const aEle = document.createElement("a");
        aEle.href = url;
        aEle.download = "抽签统计表";
        aEle.click();
      });
    },
  },
  filters: {
    dateTime(val) {
      if (val) {
        return val.substr(0, 10);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pickernumber,
.pickerchange {
  margin-top: 20px;
}

.topfont {
  font-size: 16px;
  font-weight: 400;
}

.small {
  text-align: center;
  font-weight: 100;
  font-size: 16px;
}

.bigfont {
  font-size: 18px;
  font-weight: 100;
  text-align: center;
  font-family: FangSong;
}

.input {
  font-size: 16px;
  font-weight: 400;
}

::v-deep .el-table .denger-row {
  background: #ffe4e1;
}

::v-deep .el-date-editor {
  margin-left: -4px;
}

.printTable {
  border: unset;
}

.noBorder {
  border: unset;
}

.commonBorder {
  border-right: 1px solid #9a9a9a;
}

.a1 {
  border-bottom: 1px solid #9a9a9a;
}

.title-font {
  font-family: FangSong;
}

.font-SimHei {
  font-family: FangSong;
}

.font-FangSong {
  font-family: FangSong;
}

.unitSort-box {
  text-align: left;
}

.unitSort-box li {
  margin-top: 5px;
}

.form-img-out {
  width: 130px;
  height: 130px;
}

.form-img-line {
  width: 500px;
  height: 500px;
}

.form-dialog {
  text-align: center;
}

::v-deep[data-v-04b6f7de] .el-dialog__body {
  text-align: left;
}
</style>
